<template>
  <basic-layout>
    <!-- 页面标题 -->
    <view class="w-375px px-[32rpx] py-[24rpx] bg-white box-border border-b border-gray-100">
      <view class="flex items-center justify-between">
        <text class="text-[36rpx] font-bold text-[#333333]">视频课程</text>
        <view class="flex items-center">
          <text class="text-[24rpx] text-[#666666] mr-[8rpx]">共{{ videoList?.length || 0 }}个</text>
        </view>
      </view>
    </view>
    
    <nut-empty v-if="!videoList || videoList.length == 0" description="暂无数据"></nut-empty>
    <view class="w-375px text-primary flex-col-center">
      <view v-for="(item, index) in videoList" :key="item.id" class="w-360px">
        <view class="w-full box-border p-[32rpx] bg-#fff transition-all duration-200 hover:bg-gray-50"
          :class="index === 0 ? 'mt-0' : 'mt-0 border-t border-gray-100'"
          @click="toDetail(item)">
          <view class="w-full flex-col justify-start items-start">
            <view class="w-full flex items-center mb-[16rpx]">
              <view class="relative w-[80rpx] h-[80rpx] mr-[16rpx]">
                <image 
                  :src="useImage(item.cover || '')" 
                  class="w-[80rpx] h-[80rpx] rounded-[8rpx] bg-gray-200" 
                  mode="aspectFill"
                />
                <!-- 播放图标 -->
                <!-- <view class="absolute inset-0 flex items-center justify-center">
                  <view class="w-[32rpx] h-[32rpx] bg-black bg-opacity-50 rounded-full flex items-center justify-center">
                    <view class="w-0 h-0 border-l-[10rpx] border-l-white border-t-[6rpx] border-t-transparent border-b-[6rpx] border-b-transparent ml-[2rpx]"></view>
                  </view>
                </view> -->
              </view>
              <view class="text-[32rpx] font-bold text-[#333333] ellipsis-2 flex-1">{{ item.name }}</view>
            </view>
            <!-- <view class="w-full text-[24rpx] text-[#666666] mb-[16rpx]">{{ item.createTime }}</view> -->
            <view class="w-full flex justify-between items-center">
              <view class="text-[24rpx] text-[#999999]">{{ item.createTime }}</view>
              <view class="flex items-center" v-if="item.price > 0">
                <view class="text-[28rpx] font-bold text-red-500 mr-[16rpx]">¥{{ item.price || 0 }}</view>
                <!-- <IconFont name="dongdong" size="16" color="#999999"></IconFont> -->
                <IconFont font-class-name="iconfont" class-prefix="icon" name="suo" size="16" color="#999999"></IconFont>

              </view>
              <view v-else class="text-[24rpx] text-[#999999]">免费</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部间距 -->
    <view class="h-[40rpx]"></view>
  </basic-layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { request } from '@/service/request';
import { IconFont } from '@nutui/icons-vue-taro';
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh, navigateTo } from '@tarojs/taro';
import { useImage } from '@/hooks';

definePageConfig({
  navigationBarTitleText: '视频列表',
  enablePullDownRefresh: true
});

const videoList = ref();

onMounted(() => {
  getData();
});

usePullDownRefresh(() => {
  getData();
  stopPullDownRefresh();
});

async function getData() {
  showLoading({ title: '正在请求数据...' });

  try {
    const { error, success } = await request.get('/vedio_shop/vedioShop/list', {
      pageNo: 1,
      pageSize: 20
    }, {
      useErrMsg: true
    });

    if (!error && success) {
      videoList.value = (success as any).records || [];
    }
  } catch (err) {
    console.error('获取视频列表失败', err);
  }

  hideLoading();
}

function toDetail(item: any) {
  navigateTo({
    url: `/package-other/videos/index?id=${item.id}`
  });
}
</script>

 